<template>

    <el-form 
        v-loading="loading"
        label-width="auto" 
        style="width: 550px"
        class="m-c p-r-50"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        status-icon
    >
        <el-form-item label="供应商编号：" class="m-b-20" >
            <div class="w100p">
                <el-input v-model="ruleForm.shopId" disabled/>
            </div>
        </el-form-item>
        <el-form-item label="账户类型：" class="m-b-20" prop="accounttype">
            <div class="w100p">
                <el-select v-model="ruleForm.accounttype" disabled>
                    <el-option label="企业账户" :value="0"></el-option>
                </el-select>
            </div>
        </el-form-item>
        <el-form-item label="企业名称：" class="m-b-20" prop="accountname">
            <div class="w100p">
                <el-input v-model="ruleForm.accountname" placeholder="请输入企业名称" disabled />
            </div>
        </el-form-item>
        <el-form-item label="开户银行：" class="m-b-20" prop="bank">
            <div class="w100p">
                <el-input v-model="ruleForm.bank" placeholder="请输入开户银行" />
            </div>
        </el-form-item>
        <el-form-item label="开户行号：" class="m-b-20" prop="bankcode">
            <div class="w100p">
                <el-input v-model="ruleForm.bankcode" placeholder="请输入开户行号" maxlength="12" />
            </div>
        </el-form-item>
        <el-form-item label="银行卡号：" class="m-b-20" prop="bankaccount">
            <div class="w100p">
                <el-input v-model="ruleForm.bankaccount" placeholder="请输入银行卡号" />
            </div>
        </el-form-item>
        <el-form-item label="营业执照号：" class="m-b-20" prop="businesslicenseno">
            <div class="w100p">
                <el-input v-model="ruleForm.businesslicenseno" placeholder="请输入营业执照号" />
            </div>
        </el-form-item>
        <el-form-item label="营业执照有效日期：" class="m-b-20">
            <div class="flex">
                <el-date-picker
                    v-model="ruleForm.date3"
                    placeholder="请输入开始时间"
                    :editable='true'
                    :clearable="false"
                    @change="changeDate"
                    style="width: 167px;"
                />
                <span class="m-0-10">-</span>
                <el-date-picker
                    v-model="ruleForm.date4"
                    placeholder="请输入结束时间"
                    :editable='true'
                    :clearable="false"
                    :shortcuts="shortcuts"
                    @change="changeDate"
                    style="width: 167px;"
                />
            </div>
        </el-form-item>
        <el-form-item label="营业执照照片：" class="m-b-20">
            <div class="upload-box">
                <el-upload 
                    
                    ref="businessLicenseImage"
                    list-type="picture-card" 
                    :auto-upload="false"
                    :limit="1"
                    :on-change="handleChange1"
                    :file-list="fileList1"
                    >
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                    <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                            <span
                                class="el-upload-list__item-delete"
                                @click="handleRemove1()"
                            >
                                <el-icon><Delete /></el-icon>
                            </span>
                        </span>
                    </div>
                    </template>
                </el-upload>
            </div>
        </el-form-item>
        <el-form-item label="地址：" class="m-b-20" prop="address">
            <div class="w100p">
                <el-input 
                    type="textarea" 
                    v-model="ruleForm.address" 
                    placeholder="请输入营业地址/个人身份证地址"
                    :autosize='{ minRows: 3, maxRows: 3 }'
                />
            </div>
        </el-form-item>
        <el-form-item label="法人信息&nbsp;&nbsp;&nbsp;&nbsp;" class="m-b-20">
            <div class="flex w100p">
                <div class="hr o5"></div>
            </div>
        </el-form-item>
        <el-form-item label="法人姓名：" class="m-b-20" prop="legalperson">
            <div class="w100p">
                <el-input v-model="ruleForm.legalperson" placeholder="请输入法人姓名" />
            </div>
        </el-form-item>
        <el-form-item label="法人手机号码：" class="m-b-20" prop="mobilephone">
            <div class="w100p">
                <el-input v-model="ruleForm.mobilephone" placeholder="请输入法人手机号码" maxlength='11'/>
            </div>
        </el-form-item>
        <el-form-item label="证件类型：" class="m-b-20" prop="customercerttype">
            <div class="w100p">
                <el-select v-model="ruleForm.customercerttype">
                    <el-option 
                        v-for='v in customercerttypeList' 
                        :key="v.id" 
                        :label="v.name" 
                        :value="v.id" 
                    ></el-option>
                </el-select>
            </div>
        </el-form-item>
        <el-form-item label="身份证号：" class="m-b-20" prop="idcardno">
            <div class="w100p">
                <el-input v-model="ruleForm.idcardno" placeholder="请输入身份证号"/>
            </div>
        </el-form-item>
        <el-form-item label="身份证有效日期：" class="m-b-20">
            <div class="flex">
                <el-date-picker
                    v-model="ruleForm.date1"
                    placeholder="请输入开始时间"
                    :editable='true'
                    :clearable="false"
                    @change="changeDate"
                    style="width: 167px;"
                />
                <span class="m-0-10">-</span>
                <el-date-picker
                    v-model="ruleForm.date2"
                    placeholder="请输入结束时间"
                    :editable='true'
                    :clearable="false"
                    :shortcuts="shortcuts"
                    @change="changeDate"
                    style="width: 167px;"
                />
            </div>
        </el-form-item>
        <el-form-item label="身份证照片：" class="m-b-20">
            <div class="w100p flex flex-jus-start">
                <div class="upload-box m-r-20">
                    <el-upload 
                        
                        ref="identityFrontImage"
                        list-type="picture-card" 
                        :auto-upload="false"
                        :limit="1"
                        :on-change="handleChange2"
                        :file-list="fileList2"
                    >
                        <div class="o5">
                            公民信息面
                        </div>
                        <template #file="{ file }">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove2()"
                                >
                                    <el-icon><Delete /></el-icon>
                                </span>
                            </span>
                        </div>
                        </template>
                    </el-upload>
                </div>
                <div class="upload-box">
                    <el-upload 
                        
                        ref="identityBackImage"
                        list-type="picture-card" 
                        :auto-upload="false"
                        :limit="1"
                        :on-change="handleChange3"
                        :file-list="fileList3"
                    >
                        <div class="o5">
                            国徽面
                        </div>
                        <template #file="{ file }">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove3()"
                                >
                                    <el-icon><Delete /></el-icon>
                                </span>
                            </span>
                        </div>
                        </template>
                    </el-upload>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="邮箱地址：" class="m-b-20" prop="emailaddress">
            <div class="w100p">
                <el-input v-model="ruleForm.emailaddress" placeholder="请输入邮箱地址" />
            </div>
        </el-form-item>
        <el-form-item>
            <div class="flex flex-jus-end w100p">
                <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="btnLoading">下一步</el-button>
                <el-button @click="resetForm(ruleFormRef)" :loading="btnLoading">重置</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">

import { ref,defineEmits } from 'vue'
const emit = defineEmits(['update-data']);
import type { FormInstance } from 'element-plus'
import { Plus,Delete } from '@element-plus/icons-vue'
const ruleFormRef = ref<FormInstance>()

import useStep1 from '@/hooks/step/useStep1'
const { 
    ruleForm,
    rules,
    btnLoading,
    submitForm,
    resetForm,
    changeDate,
    customercerttypeList,
    shortcuts,
    handleRemove1, 
    handleChange1,
    handleRemove2, 
    handleChange2,
    handleRemove3, 
    handleChange3,
    businessLicenseImage,
    identityFrontImage,
    identityBackImage,
    fileList1,
    fileList2,
    fileList3,
    loading,
} = useStep1(emit)

</script>
<style>
.hr {
    width: 70%;
    height: 3px;
    margin: 5px 0;
    border:none;
    background-color: #dedede;
    border-radius: 10px;
}
.upload-box {
    width: 148px;
    height:148px;
    overflow: hidden;
}
.el-upload-list__item div {
    display: block;
    margin:0 auto;
}
</style>